<template>
  <div>
    <PageSearch :search-form-config="searchFormConfig" @searchBtnClick="handleSearch" @resetBtnClick="handleReset"
      ref='mySearchRef' />

    <page-table ref="myTableRef" :page="page" :total="total" :tableDataList="tableDataList" :table-config="tableConfig"
      @createOrEdit="handleCreateOrEdit" @del="handelDel" @exportData="handleExportData" @importData="handleImportData">
    </page-table>
  </div>
</template>

<script>
import PageSearch from '@/components/page-search.vue';
import PageTable from '@/components/page-table.vue';



export default {
  components: { PageSearch, PageTable },
  data() {
    return {
      searchFormConfig: {
        formItems: [
          {
            field: 'name',
            label: "角色名",
            type: "input",
            placeholder: "请输入角色名"
          },
          {
            field: 'identification',
            label: "角色标识",
            type: "input",
            placeholder: "请输入标识"
          },
          {
            field: 'status',
            label: "角色状态",
            type: "select",
            options: [
              {
                value: true,
                title: "启用",
              },
              {
                value: false,
                title: "禁用",
              }
            ]
          },
          {
            field: 'description',
            label: "角色描述",
            type: "input",
            placeholder: "请输入角色描述"
          },

        ]
      },
      tableConfig: {
        title: "用户表",
        showIndex: true,
        showSelection: true,
        propsList: [
          {
            prop: "username",
            minWidth: "60",
            label: "用户名",
            slotName: "username",


          },
          {
            prop: "avatar",
            minWidth: "100",
            label: "头像",
            slotName: "avatar"
          },
          {
            prop: "gender_text",
            minWidth: "60",
            label: "性别",
            slotName: "gender_text"
          },
          {
            prop: "status",
            minWidth: "100",
            label: "状态",
            slotName: "status"
          },
          {
            prop: "role",
            minWidth: "100",
            label: "角色",
            slotName: "role",
            align: 'left'
          },
          {
            prop: "phone",
            minWidth: "100",
            label: "手机号",
            slotName: "phone",
            showOverflowTooltip: true
          },

          {
            prop: "createdAt",
            minWidth: "120",
            label: "创建时间",
            slotName: "createdAt",
            showOverflowTooltip: true
          },
          {
            label: "操作",
            minWidth: "240",
            slotName: "handle"
          }


        ]
      },
      tableDataList: [
        {
          username: "lisi"
        }
      ],
      total: 0,
      page: {
        currentPage: 1,
        pageSize: 10
      }

    }
  },
  methods: {
    handleReset() { },
    handleSearch() { },
    handleSearch() { },
    handleCreateOrEdit(e) {
      console.log(e);
    },
    handelDel(e) {
      console.log(e);
    },
    handleExportData() { },
    handleImportData() { }
  }
}
</script>

<style lang="less" scoped>

</style>



